<template>
    <div v-clickoutside='closeTree' :style="styles">
      <Tree :data="treeData" @on-select-change="getSelectedNodes"></Tree>
    </div>
</template>

<script>
import { getStyle } from '../../../node_modules/view-design/src/utils/assist';
import { transferIndex, transferIncrease } from '../../../node_modules/view-design/src/utils/transfer-queue';
// 自定义指令函数
const clickoutside = {
    bind(el, binding) {
        function handler(e) {
            if (el.contains(e.target) || (e.target.className && typeof(e.target.className)==='string' && e.target.className.includes(binding.arg))) {
                return false;
            }
            if (binding.expression) {
                binding.value(e);
            }
        }
        el._zClickOutside = handler;
        document.addEventListener('click', handler);
    },
    unbind(el) {
        // 解除事件监听
        document.removeEventListener('click', el._zClickOutside);
        delete el._zClickOutside;
    }
};
export default { 
    // 注册自定义指令
    directives: { clickoutside },
    props: {
      treeData: {
        type: Array,
        default: ()=>[]
      },
      getSelectedNodes: {
        type: Function,
      },
      transfer: {
          type: Boolean
      }
    },
    data() {
        return {
          width: '',
          tIndex: this.handleGetIndex(),
        };
    },
    computed: {
       styles () {
                let style = {};
                // if (this.width) style.minWidth = `${this.width}px`;

                if (this.transfer) style['z-index'] = 1060 + this.tIndex;

                return style;
            }
    },
    created() {

    },
    mounted() {
    //   this.$nextTick(() => {
    //   const body = document.querySelector("body");
    //   if (body.append) {
    //     body.append(this.$el);
    //     console.log(123)
    //   } else {
    //     body.appendChild(this.$el);
    //   }
    // });
   
    this.update()
    },
    watch: {

    },
    methods: {
          /**
     * 点击组件外 关闭树
     */
    closeTree(){
      this.$emit("closeTree",false)
    },
    update(){
      this.tIndex = this.handleGetIndex();
      this.width = parseInt(getStyle(this.$parent.$el, 'width'));
    },
    handleGetIndex () {
        transferIncrease();
        return transferIndex;
    },
    },
    components: {

    },
};
</script>

<style scoped lang="scss">

</style>
